<template>
  <div class="test-results-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>测验成绩</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
      </div>

      <el-tabs v-model="activeTab" @tab-click="handleTabChange">
        <el-tab-pane label="第一周测验" name="week1">
          <div v-if="loading" style="text-align: center; padding: 20px;">
            <i class="el-icon-loading"></i>
            <span>加载中...</span>
          </div>
          <div v-else-if="testResults" class="result-summary">
            <h3>人工智能概述</h3>
            <div class="result-score">
              <div class="score-item">
                <div class="score-label">最终成绩</div>
                <div class="score-value">{{ testResults.score }}/{{ testResults.totalScore }}</div>
              </div>
              <div class="score-item">
                <div class="score-label">提交次数</div>
                <div class="score-value">{{ testResults.submitCount }}/{{ testResults.totalSubmitCount }}</div>
              </div>
              <div class="score-item">
                <div class="score-label">完成时间</div>
                <div class="score-value">{{ testResults.finishTime }}</div>
              </div>
            </div>
          </div>

          <div v-else class="no-data">
            <i class="el-icon-warning-outline"></i>
            <p>暂无数据</p>
          </div>

          <div v-if="testResults" class="questions-review">
            <h4>答题记录</h4>
            <!-- 第一题 -->
            <div v-for="(question, index) in testResults.questions" :key="index" class="question-item">
              <div class="question-header">
                <span class="question-number">{{ index + 1 }}</span>
                <span class="question-type">{{ question.type }} ({{ question.score }}分)</span>
                <span v-if="question.result" class="question-result" :class="{ 'correct': question.result === 'correct', 'incorrect': question.result === 'incorrect' }">{{ question.result === 'correct' ? '正确' : '错误' }}</span>
              </div>
              <div class="question-content">
                <p class="question-text">{{ question.text }}</p>
                <div class="options-list">
                  <div v-for="(option, optionIndex) in question.options" :key="optionIndex" class="option" :class="{ 'chosen': option.chosen, 'correct': option.correct, 'incorrect': option.incorrect }">
                    <span class="option-label">{{ option.label }}</span>
                    <span class="option-text">{{ option.text }}</span>
                    <i v-if="option.chosen && option.correct" class="el-icon-check"></i>
                    <i v-if="option.chosen && option.incorrect" class="el-icon-close"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="第二周测验" name="week2">
          <div v-if="loading" style="text-align: center; padding: 20px;">
            <i class="el-icon-loading"></i>
            <span>加载中...</span>
          </div>
          <div v-else-if="testResults" class="result-summary">
            <h3>人工智能概述</h3>
            <div class="result-score">
              <div class="score-item">
                <div class="score-label">最终成绩</div>
                <div class="score-value">{{ testResults.score }}/{{ testResults.totalScore }}</div>
              </div>
              <div class="score-item">
                <div class="score-label">提交次数</div>
                <div class="score-value">{{ testResults.submitCount }}/{{ testResults.totalSubmitCount }}</div>
              </div>
              <div class="score-item">
                <div class="score-label">完成时间</div>
                <div class="score-value">{{ testResults.finishTime }}</div>
              </div>
            </div>
          </div>

          <div v-else class="no-data">
            <i class="el-icon-warning-outline"></i>
            <p>您尚未完成此测验</p>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getTestResults } from '@/api/test'

export default {
  name: 'TestResults',
  data() {
    return {
      activeTab: 'week1',
      testResults: null,
      loading: false
    }
  },
  created() {
    this.fetchTestResults(1) // 默认加载第一周的测验结果
  },
  methods: {
    async fetchTestResults(testId) {
      this.loading = true
      try {
        const response = await getTestResults(testId)
        if (response.data.code === 200) {
          this.testResults = response.data.data || {}
          // 确保必要的字段存在
          this.testResults.score = this.testResults.score || 0
          this.testResults.totalScore = this.testResults.totalScore || 0
          this.testResults.submitCount = this.testResults.submitCount || 0
          this.testResults.totalSubmitCount = this.testResults.totalSubmitCount || 0
          this.testResults.finishTime = this.testResults.finishTime || '--'
          this.testResults.questions = this.testResults.questions || []
        } else {
          this.testResults = {
            score: 0,
            totalScore: 0,
            submitCount: 0,
            totalSubmitCount: 0,
            finishTime: '--',
            questions: []
          }
          this.$message.error('获取测验结果失败')
        }
      } catch (error) {
        console.error('获取测验结果错误', error)
        this.testResults = {
          score: 0,
          totalScore: 0,
          submitCount: 0,
          totalSubmitCount: 0,
          finishTime: '--',
          questions: []
        }
        this.$message.error('获取测验结果失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },
    handleTabChange(tab) {
      const testId = tab.name === 'week1' ? 1 : 2
      this.fetchTestResults(testId)
    },
    goBack() {
      this.$router.push({
        name: 'MyAnswers'
      })
    }
  }
}
</script>

<style scoped>
.test-results-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.result-summary {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #EBEEF5;
}

.result-summary h3 {
  margin-bottom: 20px;
}

.result-score {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.score-item {
  text-align: center;
  padding: 15px;
  border-radius: 5px;
  background-color: #f5f7fa;
  width: 30%;
}

.score-label {
  color: #909399;
  margin-bottom: 10px;
}

.score-value {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
}

.questions-review {
  margin-top: 30px;
}

.questions-review h4 {
  margin-bottom: 20px;
}

.question-item {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #EBEEF5;
}

.question-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.question-number {
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: white;
  background-color: #409EFF;
  border-radius: 50%;
  margin-right: 10px;
}

.question-type {
  color: #909399;
  margin-right: 20px;
}

.question-result {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.question-result.correct {
  background-color: #f0f9eb;
  color: #67c23a;
}

.question-result.incorrect {
  background-color: #fef0f0;
  color: #f56c6c;
}

.question-text {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.5;
}

.options-list {
  margin-left: 25px;
}

.option {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.option.chosen.correct {
  background-color: #f0f9eb;
}

.option.chosen.incorrect {
  background-color: #fef0f0;
}

.option.correct {
  color: #67c23a;
}

.option-label {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #dcdfe6;
  margin-right: 10px;
}

.option-text {
  flex: 1;
}

.option i {
  margin-left: 10px;
}

.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #909399;
}

.no-data i {
  font-size: 48px;
  margin-bottom: 10px;
}
</style>
